<template>
  <!-- 首页中间地图 -->
  <div class="map-wrap">
    <div class="mapCenter">
      <div class="opration">
        <p class="refrashDate" v-if="!displayphone">
          <span @click="backMap">全国</span>
          <span @click="backMap" v-if="!firstRender && third == false">-江苏省分行</span>
          <span @click="backMap" v-if="!firstRender && isShowcity == true">-无锡市分行</span>
          <span>档案中心2-----</span>
        </p>
      </div>
      <div class="anniubtn">
        <el-button size="mini" @click.native="oneMonth">近一月</el-button>
        <el-button size="mini" @click.native="sevenDay" id="seven-day">近一周</el-button>
        <el-button size="mini" @click.native="threeDay">近三天</el-button>
      </div>
      <p class="refrashDate2" v-if="displayphone">
        <span>全国</span>
        <span @click="backMap" v-if="!firstRender && third == false">-江苏省工行</span>
        <span @click="backMap" v-if="!firstRender && isShowcity == true">-无锡市分行</span>
      </p>
      <div class="select flex">
        <div>
          <el-select
            class="select-style"
            :popper-append-to-body="false"
            ref="fieldSelect"
            multiple
            clearable
            v-model="value"
            filterable
            placeholder="查询条件"
            @focus="focus"
            @blur="blur"
          >
            <el-option-group v-for="group in options" :key="group.label" :label="group.label">
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-option-group>
          </el-select>
        </div>
        <div style="margin-left:auto;margin-right:10px">
          <el-button v-if="!displayNone" type="success" size="mini" @click.native="backMap">上一级</el-button>
        </div>
      </div>
      <div id="container"></div>
      <!-- 地图下方滚动 -->
      <div class="lunbo">
        <div class="carous">
          <el-carousel height=".4rem" @click.native="handleClick">
            <el-carousel-item
              v-for="(ca, i) in newArr"
              :key="i + 'ca'"
              :interval="10000"
              arrow="always"
            >
              <p class="lunbo-tit">
                <span style="color: #01F0F4;font-weight: bold;">【{{ca.name}}】</span>
                <span>{{ ca.desc }}数</span>
              </p>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let echarts = require("echarts/lib/echarts");
let baseUrl;
import $ from "jquery";
import { geoCoordMap, GZData } from "./myMap";
import { provinces, cityMap, special } from "./common";
require("echarts/lib/chart/map");
require("echarts/map/js/china");
let myChart;
let provincesName = "";
let mapStack = [];
let _self;
//排序数据
let sortData = [];
let areaList = [];
//排序后的标题
let titledata = [];
let mapName = "中国";
import { baseEnv } from "@/request";
export default {
  name: "mapChart",
  data() {
    return {
      displayNone: true,
      displayphone: false,
      areaList: areaList,
      dt: new Date(),
      focused: false,
      value1: null,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      newArr: [
        {
          name: "姑苏支行",
          desc:
            " 温度22.5℃  湿度42.8%  监控正常  消防设备正常  自动报警系统正常  巡检日期2021.10.25"
        },
        {
          name: "唯亭支行",
          desc:
            " 温度22.5℃  湿度42.8%  监控正常  消防设备正常  自动报警系统正常  巡检日期2021.10.25"
        },
        {
          name: "吴中支行",
          desc:
            " 温度22.5℃  湿度42.8%  监控正常  消防设备正常  自动报警系统正常  巡检日期2021.10.25"
        },
        {
          name: "工业园区支行",
          desc:
            " 温度22.5℃  湿度42.8%  监控正常  消防设备正常  自动报警系统正常  巡检日期2021.10.25"
        }
      ],
      // value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      carouselData: [
        {
          name: "姑苏支行",
          desc:
            " 温度22.5℃  湿度42.8%  监控正常  消防设备正常  自动报警系统正常  巡检日期2021.10.25"
        },
        {
          name: "唯亭支行",
          desc:
            " 温度22.5℃  湿度42.8%  监控正常  消防设备正常  自动报警系统正常  巡检日期2021.10.25"
        },
        {
          name: "吴中支行",
          desc:
            " 温度22.5℃  湿度42.8%  监控正常  消防设备正常  自动报警系统正常  巡检日期2021.10.25"
        },
        {
          name: "工业园区支行",
          desc:
            " 温度22.5℃  湿度42.8%  监控正常  消防设备正常  自动报警系统正常  巡检日期2021.10.25"
        }
      ],
      second: false,
      mapChina: [],
      firstRender: false,
      isShowcity: false,
      third: false,
      curMap: {},
      options: [
        {
          label: "年限",
          options: [
            {
              value: "1",
              label: "2020年"
            },
            {
              value: "2",
              label: "2021年"
            }
          ]
        },
        {
          label: "档案类型",
          options: [
            {
              value: "3",
              label: "会计"
            },
            {
              value: "4",
              label: "信用卡"
            },
            {
              value: "5",
              label: "文书"
            },
            {
              value: "6",
              label: "借贷"
            }
          ]
        }
      ],
      value: "1"
    };
  },
  computed: {},
  beforeMount() {
    
    let baseUrl = "/customer-aim";
    this.axios.get(`${baseUrl}/hygrother/getValue?id=30041945`).then(res => {

      console.log(res, '1111获得数据居')
      let data = res.data.data || null;
      if (data) {
        (this.tem = data.tem || 22.5), (this.hum = data.hum || 42.8);
        this.newArr = this.carouselData.map(el => {
          return {
            name: el.name,
            desc: `温度${data.tem}℃  湿度${data.hum}%  监控正常  消防设备正常  自动报警系统正常  巡检日期2021.10.25`
          };
        });
      }
    }).catch(err => {
      console.log(err, '错误')
    })
  },
  mounted() {
    _self = this;
    if (baseEnv == "development") {
      baseUrl = "/api";
    } else {
      baseUrl = "https://overall.qcdoc.cn/";
    }
    if (window.outerWidth < 768) {
      this.displayphone = true;
    } else {
      this.displayphone = false;
    }
    // 初始化加载
    this.mapChart();
    this.$nextTick(function() {
      this.$refs.fieldSelect.$refs.scrollbar.$el.classList.add(
        "scroll-opacity"
      );
    });
  },
  methods: {
    threeDay() {
      let month = parseInt(this.dt.getMonth() + 1);
      let day1 = this.dt.getFullYear() + "-" + month + "-" + this.dt.getDate();
      let day2 =
        this.dt.getFullYear() +
        "-" +
        month +
        "-" +
        parseInt(this.dt.getDate() - 1);
      let day3 =
        this.dt.getFullYear() +
        "-" +
        month +
        "-" +
        parseInt(this.dt.getDate() - 2);
      this.$emit("changeData", [day3, day2, day1]);
    },
    sevenDay() {
      let month = parseInt(this.dt.getMonth() + 1);
      let day1 = this.dt.getFullYear() + "-" + month + "-" + this.dt.getDate();
      let day2 =
        this.dt.getFullYear() +
        "-" +
        month +
        "-" +
        parseInt(this.dt.getDate() - 1);
      let day3 =
        this.dt.getFullYear() +
        "-" +
        month +
        "-" +
        parseInt(this.dt.getDate() - 2);
      let day4 =
        this.dt.getFullYear() +
        "-" +
        month +
        "-" +
        parseInt(this.dt.getDate() - 3);
      let day5 =
        this.dt.getFullYear() +
        "-" +
        month +
        "-" +
        parseInt(this.dt.getDate() - 4);
      let day6 =
        this.dt.getFullYear() +
        "-" +
        month +
        "-" +
        parseInt(this.dt.getDate() - 5);
      let day7 =
        this.dt.getFullYear() +
        "-" +
        month +
        "-" +
        parseInt(this.dt.getDate() - 6);
      this.$emit("changeSevenData", [day7, day6, day5, day4, day3, day2, day1]);
    console.log([day7, day6, day5, day4, day3, day2, day1], 'MINK')
    
    },
    // 近一月
    oneMonth() {
      let month = parseInt(this.dt.getMonth() + 1);
      let day1 = this.dt.getFullYear() + "-" + month + "-" + this.dt.getDate();
      this.$emit("changeSevenData", [day1, day1, day1, day1, day1]);
    },
    focus() {
      console.log('focus')
    },
    blur() {
      console.log('blur')
    },
    handleClick() {},
    // 获取横纵坐标
    getMousePos() {
      var e = event || window.event;
      var scrollX =
        document.documentElement.scrollLeft || document.body.scrollLeft;
      var scrollY =
        document.documentElement.scrollTop || document.body.scrollTop;
      var x = e.pageX || e.clientX + scrollX;
      var y = e.pageY || e.clientY + scrollY;
      console.log("获取横纵坐标", x, y);
      return {
        x: x,
        y: y
      };
    },
    // 返回全国视图
    backMap() {
      //获取上一级地图信息
      let map = mapStack.pop();
      if (mapStack.length == 1) {
        this.$emit("changeProvenceData");
      }
      if (mapStack.length == 0) {
        this.$emit("resetData");
        myChart.clear();
        myChart.off("click");
        myChart.off("contextmenu");
        this.firstRender = true;
        this.second = false;
        this.third = false;
        this.isShowcity = false;
        setTimeout(() => {
          // 
          console.log('返回全国视图 加载全国地图')
          this.mapChart();
        }, 0);
        return;
      }
      if (mapStack.length == 1) {
        provincesName = map.provincesName;
        this.isShowcity = false;
      }
      this.$echarts.registerMap(map.mapName, map.mapJson);
      sortData = map.sortData;
      titledata = map.titledata;
      this.initEcharts(map.mapName, map.mapJson, map.sortData, false); //map.mapchin是data数据

      if (!map) {
        console.log("没有入栈数据了");
        return;
      }
    },
    //配置渲染map
    mapChart() {
      
      if (myChart != null && myChart != "" && myChart != "undefined") {
        myChart.dispose();
      }
      // 在container中 放入地图
      myChart = echarts.init(document.getElementById("container"));
      // myChart.showLoading();
      document.getElementById("container").oncontextmenu = function() {
        return false;
      };
      window.addEventListener("resize", () => {
        // myChart.resize();
      });

      // 去掉第一级的中国地图
      // 第一次渲染地图province/wuxi
      $.getJSON(`/map/province/jiangsu.json`, data => {
      // $.getJSON(`/map/china.json`, data => {
        console.log(`/map/china.jsonkkkkkkkkkkkkk`, data);
        console.error('‘中国地图', data)
        this.mapChina = data;
        // myChart.hideLoading();
        let mapJsonData = [];
        for (var i = 0; i < data.features.length; i++) {
          mapJsonData.push({
            id: data.features[i].id,
            name: data.features[i].properties.name
          });
        }
        console.log(mapName,mapJsonData, data, '我是地图加载。。。。。。。。。。。。。。。')
        mapName = '江苏'
        echarts.registerMap(mapName, data);
        /**获取省份数据*/
        this.renderPrimaryMap(mapJsonData, true);
      });
      // 市
      var that = this;

      // 点击触发
      myChart.on("click", param => {

        console.log(param.componentSubType, this.isShowcity, provinces, param, '点击地图触发。。。。。。。。。。。')
        provincesName = provinces[param.name] || cityMap[param.name];
        if (param.componentSubType == "scatter" && this.isShowcity) {
          // this.randerHtml();
          let routeData = this.$router.resolve({
            path: "/about",
            query: {
              title: "无锡市"
            }
          });
          window.open(routeData.href, "_blank");
        }
        if (param.data) {
          console.error(param.data,"该地图没有下一级地区了");
          if (!(param.data.id || param.data.cityid)) {
            // 有省id，市id才有下一级
            console.error("该地图没有下一级地区了");
            return;
          }
        } else {
          return;
        }
        console.log(provinces, 'provinces22222222222')
        if (param.name in provinces) {
          this.$emit("changeProvenceData");
          this.second = true;
          if (param.name == "江苏") {
            /**
             * 绑定数据入栈事件
             */
            let n = 1;
            if (special.indexOf(param.name) == -1) {
              n = 2; //2层
            }
            // FiXED:  2级下钻会有问题， 函数顶部加入下钻层级判断
            if (mapStack.length < n) {
              //   //将上一级地图信息压入mapStack
              mapStack.push({
                mapName: this.curMap.mapName,
                mapJson: this.curMap.mapJson, // mapJson
                sortData: this.curMap.sortData, // sortData
                titledata: this.curMap.titledata,
                provincesName: this.curMap.provincesName
              });
            }
            if (window.outerWidth < 768) {
              this.displayNone = false;
            }
            this.firstRender = false;
          }
          // 下钻一层
          //直辖市和特别行政区-只有二级地图，没有三级地图
          if (special.indexOf(param.name) >= 0) {
            showProvince(param);
          } else {
            showProvince(param);
          }
        } else {
          // 显示县级地图
          // this.third = true;
          if (param.name == "无锡市") {
            this.$emit("changeCityData");
            this.isShowcity = true;
            showCitys(param);
            /**
             * 绑定数据入栈事件
             */
            let n = 1;
            if (special.indexOf(param.name) == -1) {
              n = 2; //2层
            }
            // FiXED:  2级下钻会有问题， 函数顶部加入下钻层级判断
            if (mapStack.length < n) {
              //   //将上一级地图信息压入mapStack
              mapStack.push({
                mapName: this.curMap.mapName,
                mapJson: this.curMap.mapJson, // mapJson
                sortData: this.curMap.sortData, // sortData
                titledata: this.curMap.titledata,
                provincesName: this.curMap.provincesName
              });
            }
          }
          if (param.name == "南京市") {
            this.$emit("changeCityData");
            this.isShowcity = true;
            showCitys(param);
            /**
             * 绑定数据入栈事件
             */
            let n = 1;
            if (special.indexOf(param.name) == -1) {
              n = 2; //2层
            }
            // FiXED:  2级下钻会有问题， 函数顶部加入下钻层级判断
            if (mapStack.length < n) {
              //   //将上一级地图信息压入mapStack
              mapStack.push({
                mapName: this.curMap.mapName,
                mapJson: this.curMap.mapJson, // mapJson
                sortData: this.curMap.sortData, // sortData
                titledata: this.curMap.titledata,
                provincesName: this.curMap.provincesName
              });
            }
          }
        }
      });
      myChart.on("contextmenu", () => {
        this.backMap();
        return false;
      });
      //异步展示地图
      //展示对应的省
      function showProvince(param) {
        console.log(param, provinces, 'provincesprovincesprovincesprovinces')
        if (param.name == "江苏") {
          $.getJSON(`/map/province/${provinces[param.name]}.json`, data => {
            that.mapChina = data;
            that.$echarts.registerMap(param.name, data);
            let mapJsonData = [];
            for (var i = 0; i < data.features.length; i++) {
              // 读取地图的 name 用来组成 echart 需要的形式
              mapJsonData.push({
                name: data.features[i].properties.name,
                value: Math.floor(Math.random() * 10000)
              });
            }
            that.initEcharts(param.name, mapJsonData, null, false);
            if (param.data.id !== "undifiend") {
              that.getCityNumber(param.name, param.data.id, that.mapChina);
            }
          });
        } else {
          that.$message("当前城市暂未开拓");
          return;
        }
      }

      //展示对应市
      function showCitys(param) {
        // 显示县级地图
        if (param.name == "无锡市") {
          $.getJSON(`/map/city/${cityMap[param.name]}.json`, data => {
            that.mapChina = data;
            that.$echarts.registerMap(param.name, data);
            let mapJsonData = [];
            that.$echarts.registerMap(param.name, data);
            for (var i = 0; i < data.features.length; i++) {
              // 读取地图的 name 用来组成 echart 需要的形式
              mapJsonData.push({
                name: data.features[i].properties.name
              });
            }

            // if (that.second) {
            //   that.initEcharts(param.name, mapJsonData, null, false);
            // } else {
            that.initEcharts(param.name, mapJsonData, null, false);
            // }
            //  if (param.data.cityid) {
            // let postData3 = {
            //   parentid: 'cityid',
            //   value: params.data.cityid,
            // }
            //这里传递的城市名有问题“北京市”，渲染地图的名字是“北京”，所以地图名要用原来的名字渲染
            // that.getAreaNumber(param.name, param.data.cityid, data)
            // }
          });
        } else if (param.name == "南京市") {
          $.getJSON(`/map/city/${cityMap[param.name]}.json`, data => {
            that.mapChina = data;
            that.$echarts.registerMap(param.name, data);
            let mapJsonData = [];
            that.$echarts.registerMap(param.name, data);
            for (var i = 0; i < data.features.length; i++) {
              // 读取地图的 name 用来组成 echart 需要的形式
              mapJsonData.push({
                name: data.features[i].properties.name
              });
            }

            // if (that.second) {
            //   that.initEcharts(param.name, mapJsonData, null, false);
            // } else {
            that.initEcharts(param.name, mapJsonData, null, false);
            // }
            //  if (param.data.cityid) {
            // let postData3 = {
            //   parentid: 'cityid',
            //   value: params.data.cityid,
            // }
            //这里传递的城市名有问题“北京市”，渲染地图的名字是“北京”，所以地图名要用原来的名字渲染
            // that.getAreaNumber(param.name, param.data.cityid, data)
            // }
          });
        } else {
          that.$message("当前城市暂未开拓");
          return;
        }
      }
    },
    initEcharts(mapTitle, mapJson, customerNum, status = false) {

      console.log(this.firstRender, '是地图入门')
      var objArr = [];
      let geo = {};
      // 是否第一级
      if (this.firstRender) {
        this.renderScatter("china");
        var color = [
          "yellow",
          "#f0814dea",
          "#f0814dea",
          "#f0814dea",
          "#f0814dea",
          "#f0814dea",
          "#f0814dea"
        ];
        console.log([["南京市", GZData]], 'GZDataGZDataGZData')
        // [["南京市", GZData]].forEach(function(item, i) {
        //   objArr.push(
        //     // 涟漪散点图
        //     {
        //       name: item[0],
        //       type: "effectScatter",
        //       coordinateSystem: "geo",
        //       zlevel: 2,
        //       rippleEffect: {
        //         brushType: "stroke"
        //       },
        //       label: {
        //         normal: {
        //           show: true,
        //           fontSize: _self.$fontSize.fontSize(0.12),
        //           position: "right",
        //           formatter: "{b}"
        //         }
        //       },
        //       symbolSize: _self.$fontSize.fontSize(0.2),
        //       // function(val) {
        //       //   return val[2] / 8;
        //       // }
        //       itemStyle: {
        //         normal: {
        //           color: color[i]
        //         }
        //       },
        //       data: item[1].map(function(dataItem) {
        //         return {
        //           name: dataItem[1].name,
        //           value: geoCoordMap[dataItem[1].name].concat([
        //             dataItem[1].value
        //           ])
        //         };
        //       })
        //     }
        //   );
        // });
      }
      if (this.second && !this.firstRender) {
        if (!this.third) {
          // 第二层
          // if(mapTitle=='无锡市' || mapTitle=="南京市区"){

          //   return
          // }
          this.renderCityScatter();
          var chinaGeoCoordMap = {
            // 经纬度
            南京市: [118.800697, 32.077625],
            无锡市: [120.308234, 31.498071],
            宿迁市3333: [118.287324, 33.970145],
            徐州1: [119.287324, 34.970145],
            扬州市: [119.428622, 32.403603],
            南通市: [120.900441, 31.994389],
            泰州市: [119.926122, 32.464087]
          };
          var chinaDatas = [
            //航线条数
            [
              {
                name: "宿迁市3333",
                value: 0
              }
            ],
            [
              {
                name: "徐州1",
                value: 0
              }
            ],
            [
              {
                name: "扬州市",
                value: 0
              }
            ],
            [
              {
                name: "南通市",
                value: 0
              }
            ],
            [
              {
                name: "泰州市",
                value: 0
              }
            ]
          ];
          var convertDataPro = function(data) {
            var res = [];
            // for (var i = 0; i < data.length; i++) {
            //   var dataItem = data[i];
            //   var fromCoord = chinaGeoCoordMap[dataItem[0].name];
            //   var toCoord = [118.800697, 32.077625]; //目的地
            //   if (fromCoord && toCoord) {
            //     res.push([
            //       {
            //         coord: fromCoord,
            //         value: dataItem[0].value
            //       },
            //       {
            //         coord: toCoord
            //       }
            //     ]);
            //   }
            // }
            for (var i = 0; i < data.length; i++) {
              var dataItem = data[i];
              var fromCoord = chinaGeoCoordMap[dataItem[0].name];
              var toCoord = [120.308234, 31.498071]; //目的地
              if (fromCoord && toCoord) {
                res.push([
                  {
                    coord: fromCoord,
                    value: dataItem[0].value
                  },
                  {
                    coord: toCoord
                  }
                ]);
              }
            }
            return res;
          };


          
          objArr = [];
          geo = {
            geo: {
              show: true,
              map: provincesName,
              label: {
                normal: {
                  show: false,
                  textStyle: {
                    color: "#ddd"
                  }
                },
                emphasis: {
                  textStyle: {
                    color: "#000"
                  }
                }
              },
              roam: false,
              itemStyle: {
                normal: {
                  areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
                  borderColor: "#EBEBE4", //#EBEBE4灰色
                  borderWidth: 0.5
                },
                emphasis: {
                  areaColor: "rgba(43, 196, 243, 0.42)" //s鼠标放上去，地图块高亮显示的颜色
                }
              }
            }
          };
          var symbolImg2 = "image://" + require("@/assets/logo.png");
          var symbolImg =
            "image://" + require("@/assets/gongshangyinhang-.png");
          var symbolImgPlane = "image://" + require("@/assets/wuliuche.png");
          // 加载 无锡市 地图
          console.log('无锡市', [["无锡市", chinaDatas]]);
          [["无锡市", chinaDatas]].forEach(function(item) {
            objArr.push(
              {
                type: "lines",
                zlevel: 2,
                effect: {
                  show: true,
                  period: 5, //箭头指向速度，值越小速度越快
                  trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                  symbol: symbolImgPlane, //箭头图标
                  // symbol: "arrow", //箭头图标
                  symbolSize: _self.$fontSize.fontSize(0.2) //图标大小
                },
                lineStyle: {
                  normal: {
                    width: 1, //尾迹线条宽度
                    opacity: 1, //尾迹线条透明度
                    curveness: 0.3, //尾迹线条曲直度
                    color: "#f0814dea"
                  }
                },
                data: convertDataPro(item[1])
              },
              {
                type: "effectScatter",
                coordinateSystem: "geo",
                zlevel: 2,
                rippleEffect: {
                  //涟漪特效
                  period: 20, //动画时间，值越小速度越快
                  brushType: "stroke", //波纹绘制方式 stroke, fill
                  scale: 0 //波纹圆环最大限制，值越大波纹越大
                },
                label: {
                  normal: {
                    show: true,
                    position: "right", //显示位置
                    offset: [5, 0], //偏移设置
                    formatter: function(params) {
                      //圆环显示文字
                      return params.data.name;
                    },
                    fontSize: _self.$fontSize.fontSize(0.13)
                  },
                  emphasis: {
                    show: true
                  }
                },
                symbol: symbolImg,
                symbolSize: _self.$fontSize.fontSize(0.2),
                itemStyle: {
                  normal: {
                    show: false,
                    color: "#f50"
                  }
                },
                data: item[1].map(function(dataItem) {
                  console.log(dataItem[0].name, '适合什么')
                  return {
                    name: dataItem[0].name,
                    value: chinaGeoCoordMap[dataItem[0].name].concat([
                      dataItem[0].value
                    ])
                  };
                })
              },
              //被攻击点
              {
                type: "scatter",
                coordinateSystem: "geo",
                zlevel: 2,
                rippleEffect: {
                  period: 4,
                  brushType: "stroke",
                  scale: 4
                },
                label: {
                  normal: {
                    show: true,
                    position: "right",
                    //offset:[5, 0],
                    color: "#0f0",
                    formatter: "{b}",
                    textStyle: {
                      color: "#0f0"
                    }
                  },
                  emphasis: {
                    show: true,
                    color: "#f60"
                  }
                },
                symbol: symbolImg2,
                symbolSize: _self.$fontSize.fontSize(0.5),
                data: [
                  {
                    name: item[0],
                    value: chinaGeoCoordMap[item[0]].concat([10])
                  }
                ]
              }
            );
          });
        }
      }


      console.log(objArr, 'objArrobjArrobjArrobjArr')
      let series = [];
      series = [
        ...objArr,
        {
          name: mapTitle, //上面的下钻用到seriesName绑定下一级，换name绑定
          type: "map",
          geoIndex: 0,
          map: mapTitle,
          // roam: false,
          zoom: 1,
          label: {
            normal: {
              show: true,
              fontSize: _self.$fontSize.fontSize(0.16)
            }
          },
          itemStyle: {
            normal: {
              areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
              borderColor: "#EBEBE4" //#EBEBE4灰色
            },
            emphasis: {
              // fontSize:_self.$fontSize.fontSize(.25),
              areaColor: "rgba(43, 196, 243, 0.42)" //s鼠标放上去，地图块高亮显示的颜色
            }
          },
          data: customerNum
        }
      ];
      let option = {
        ...geo,
        series: series,
        // 初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果：
        animationDuration: 1000,
        animationEasing: "cubicOut",
        // 数据更新动画的时长。
        animationDurationUpdate: 1000
      };
      if (status) {
        myChart.setOption(option, true);
        // myChart.setOption(
        //   option,
        //   {
        //     replaceMerge: ["geo"],
        //   },
        //  false
        // );
      } else {
        myChart.setOption(option);
      }
      this.curMap = {};
      this.curMap = {
        mapName: mapTitle, //地图名称
        mapJson: mapJson, // 地图的json数据
        mapChina: this.mapChina,
        sortData: sortData, // 排序后的json数据
        titledata: titledata, // 地图名称下对应的地理名数组
        provincesName: provincesName
      };
    },
    // 渲染二级地图，城市
    renderPrimaryMap(result, flag) {
      let tmp = [];
      if (flag) {
        result.forEach(item => {
          tmp.push({
            id: item.id,
            name: item.name,
            value: Math.floor(Math.random() * 100 + parseInt(item.id))
          });
        });
      }
      //获取最大值，并排序
      let maxData = this.getMaxDataAndSort(tmp);
      maxData;
      //绘制地图，拿到数据后再渲染一次
      this.initEcharts(mapName, this.mapChina, tmp, false);
    },
    setAreaList(data) {
      this.areaList = data; // vue是这样写的，内部有代理
    },
    getMaxDataAndSort(originData) {
      if (originData == "undefined") {
        return;
      }
      titledata = [];
      sortData = [];
      sortData = originData.sort(this.numDescSort);
      let maxData = sortData.slice(-1)[0]["value"];
      let maxDataId = sortData.slice(-1)[0]["id"];
      if (!maxDataId) {
        maxDataId = sortData.slice(-1)[0]["cityid"]
          ? sortData.slice(-1)[0]["cityid"]
          : sortData.slice(-1)[0]["areaid"];
      }
      for (let i = 0; i < sortData.length; i++) {
        titledata.push(sortData[i].name);
      }
      areaList = [...sortData].reverse();
      this.setAreaList(areaList);
      return {
        maxDataId,
        maxData
      };
    },
    numDescSort(a, b) {
      return a["value"] - b["value"];
    },
    stringToJson(data) {
      let result = Object.create(null);
      if (Object.prototype.toString.call(data) !== "[object Object]") {
        try {
          result = JSON.parse(data);
        } catch {
          throw TypeError("数据转换成JSON出错");
        }
      }
      return result;
    },
    getCityNumber(name, id, data) {
      if (!id) {
        return;
      }
      // let postData2 = {
      //   parentid: 'provinceid',
      //   value: id,
      // }
      this.renderSecondMap(name, data, true);
    },
    renderSecondMap(eName, resp, flag = false) {
      let tmp = [];
      if (flag) {
        resp.features.forEach(item => {
          tmp.push({
            //需要加上cityid传递渲染，下一级地图渲染需要用到，点击的时候有判断，没有下级id直接return
            cityid: item.id,
            name: item.properties.name,
            value: item.properties.childNum
          });
        });
      }
      let maxData = this.getMaxDataAndSort(tmp);
      maxData;
      this.initEcharts(eName, this.mapChina, tmp, false);
    },
    getAreaNumber(cityName, cityId, data) {
      //   let postData3 = {
      //   parentid: 'cityid',
      //   value: cityId,
      // }
      this.renderThirdMap(cityName, data, true);
    },
    renderThirdMap(cityName, resp, flag = false) {
      let tmp = [];
      if (flag) {
        resp.features.forEach(item => {
          tmp.push({
            areaid: item.id,
            name: item.properties.name,
            value: Math.floor(Math.random() * 10 + 1)
          });
        });
      }
      let maxData = this.getMaxDataAndSort(tmp);
      maxData;
      this.initEcharts(cityName, this.mapChina, tmp, false);
    },
    // 航线图表
    renderScatter(map) {
      if (this.firstRender) {
        var color = ["#f0814dea", "#f0814dea", "#f0814dea"];
        var series = [];
        [["南京市", GZData]].forEach(function(item, i) {
          series.push(
            // 涟漪散点图
            {
              name: item[0],
              type: "effectScatter",
              coordinateSystem: "geo",
              zlevel: 2,
              rippleEffect: {
                brushType: "stroke"
              },
              label: {
                normal: {
                  show: true,
                  position: "right",
                  formatter: "{b}"
                }
              },
              symbolSize: function(val) {
                return val[2] / 8;
              },
              itemStyle: {
                normal: {
                  color: color[i]
                }
              },
              data: item[1].map(function(dataItem) {
                return {
                  name: dataItem[1].name,
                  value: geoCoordMap[dataItem[1].name].concat([
                    dataItem[1].value
                  ])
                };
              })
            }
          );
        });
        let option = {
          // tooltip: {
          //   trigger: "item",
          // },
          geo: {
            map: map,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#ddd"
                }
              },
              emphasis: {
                textStyle: {
                  color: "#000"
                }
              }
            },
            // label: {
            //   emphasis: {
            //     show: false,
            //   },
            // },
            // roam: true,
            itemStyle: {
              normal: {
                areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
                borderColor: "#EBEBE4", //#EBEBE4灰色
                borderWidth: 0.5
              },
              emphasis: {
                areaColor: "rgba(43, 196, 243, 0.42)" //s鼠标放上去，地图块高亮显示的颜色
              }
            }
            // itemStyle: {
            //   normal: {
            //     //          	color: '#ddd',
            //     borderColor: "rgba(147, 235, 248, 0)",
            //     borderWidth: 1,
            //     areaColor: {
            //       type: "radial",
            //       x: 0.5,
            //       y: 0.5,
            //       r: 0.8,
            //       colorStops: [
            //         {
            //           offset: 0,
            //           color: "rgba(175,238,238, 0)", // 0% 处的颜色
            //         },
            //         {
            //           offset: 1,
            //           color: "rgba(	47,79,79, .01)", // 100% 处的颜色
            //         },
            //       ],
            //       globalCoord: false, // 缺省为 false
            //     },
            //   },
            // },
          },
          series: series
        };
        myChart.setOption(option);
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      }
    },
    // 制作散点图
    renderCityScatter() {
      console.log(this.second, '制作散点图')
      if (this.second) {
        // 金华119.682762,29.08767
        // 118.87788,29.039177
        if (isNaN(parseInt(provincesName))) {
          var chinaGeoCoordMap = {};
          var chinaDatas = [];
          if (provincesName == "jiangsu") {
            chinaGeoCoordMap = {
              // 经纬度
              南京市: [118.800697, 32.077625],
              无锡市: [120.308234, 31.498071],
              宿迁市33: [118.287324, 33.970145],
              // 徐州: [117.887324, 34.170145],
              扬州市: [119.428622, 32.403603],
              南通市: [120.900441, 31.994389],
              泰州市: [119.926122, 32.464087]
            };
            chinaDatas = [
              //航线条数
              [
                {
                  name: "宿迁市33",
                  value: 0
                }
              ],
              // [
              //   {
              //     name: "徐州",
              //     value: 0
              //   }
              // ],
              [
                {
                  name: "扬州市",
                  value: 0
                }
              ],
              [
                {
                  name: "南通市",
                  value: 0
                }
              ],
              [
                {
                  name: "泰州市",
                  value: 0
                }
              ]
            ];
          } else {
            chinaGeoCoordMap = {};
            chinaDatas = [];
          }
          var convertDataPro = function(data) {
            var res = [];
            // for (var i = 0; i < data.length; i++) {
            //   var dataItem = data[i];
            //   var fromCoord = chinaGeoCoordMap[dataItem[0].name];
            //   var toCoord = [118.800697, 32.077625]; //目的地
            //   if (fromCoord && toCoord) {
            //     res.push([
            //       {
            //         coord: fromCoord,
            //         value: dataItem[0].value
            //       },
            //       {
            //         coord: toCoord
            //       }
            //     ]);
            //   }
            // }
            for (var i = 0; i < data.length; i++) {
              var dataItem = data[i];
              var fromCoord = chinaGeoCoordMap[dataItem[0].name];
              var toCoord = [120.308234, 31.498071]; //目的地
              if (fromCoord && toCoord) {
                res.push([
                  {
                    coord: fromCoord,
                    value: dataItem[0].value
                  },
                  {
                    coord: toCoord
                  }
                ]);
              }
            }
            return res;
          };
          var series = [];
          $.getJSON(`/map/province/${provincesName}.json`, json => {
            echarts.registerMap(`${provincesName}`, json);
            var symbolImg2 = "image://" + require("@/assets/logo.png"); // 中心点的图标
            //  var symbolImg2 = "image://" + require("@/assets/logo.png");
            var symbolImg =
              "image://" + require("@/assets/gongshangyinhang-.png");
            var symbolImgPlane = "image://" + require("@/assets/wuliuche.png");
            [["无锡市", chinaDatas]].forEach(function(item) {
              series.push(
                {
                  type: "lines",
                  zlevel: 2,
                  effect: {
                    show: true,
                    period: 5, //箭头指向速度，值越小速度越快
                    trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: symbolImgPlane, //箭头图标
                    // symbol:'arrow',
                    symbolSize: _self.$fontSize.fontSize(0.2) //图标大小
                  },
                  lineStyle: {
                    normal: {
                      width: 1, //尾迹线条宽度
                      opacity: 1, //尾迹线条透明度
                      curveness: 0.3, //尾迹线条曲直度
                      color: "#f0814dea"
                    }
                  },
                  data: convertDataPro(item[1])
                },
                {
                  type: "effectScatter", //effectScatter
                  coordinateSystem: "geo",
                  zlevel: 2,
                  rippleEffect: {
                    //涟漪特效
                    period: 20, //动画时间，值越小速度越快
                    brushType: "stroke", //波纹绘制方式 stroke, fill
                    scale: 0 //波纹圆环最大限制，值越大波纹越大
                  },
                  label: {
                    normal: {
                      show: true,
                      position: "right", //显示位置
                      offset: [5, 0], //偏移设置
                      formatter: function(params) {
                        //圆环显示文字
                        return params.data.name;
                      },
                      fontSize: _self.$fontSize.fontSize(0.13)
                    },
                    emphasis: {
                      show: true
                    }
                  },
                  symbol: symbolImg,
                  symbolSize: _self.$fontSize.fontSize(0.2),
                  itemStyle: {
                    normal: {
                      show: false,
                      color: "#f00"
                    }
                  },
                  data: item[1].map(function(dataItem) {
                    return {
                      name: dataItem[0].name,
                      value: chinaGeoCoordMap[dataItem[0].name].concat([
                        dataItem[0].value
                      ])
                    };
                  })
                },
                //被攻击点
                {
                  type: "scatter",
                  coordinateSystem: "geo",
                  zlevel: 2,
                  rippleEffect: {
                    period: 4,
                    brushType: "stroke",
                    scale: 4
                  },
                  label: {
                    normal: {
                      show: true,
                      position: "right",
                      //offset:[5, 0],
                      color: "#f60",
                      formatter: "{b}",
                      textStyle: {
                        color: "#f60"
                      }
                    },
                    emphasis: {
                      show: true,
                      color: "#f60"
                    }
                  },
                  symbol: symbolImg2,
                  symbolSize: _self.$fontSize.fontSize(0.2),
                  data: [
                    {
                      name: item[0],
                      value: chinaGeoCoordMap[item[0]].concat([10])
                    }
                  ]
                }
              );
            });

            let option = {
              geo: {
                show: true,
                map: provincesName,
                label: {
                  normal: {
                    show: false,
                    textStyle: {
                      color: "#ddd"
                    }
                  },
                  emphasis: {
                    textStyle: {
                      color: "#000"
                    }
                  }
                },
                roam: false,
                itemStyle: {
                  normal: {
                    areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
                    borderColor: "#EBEBE4", //#EBEBE4灰色
                    borderWidth: 0.5
                  },
                  emphasis: {
                    areaColor: "rgba(43, 196, 243, 0.42)" //s鼠标放上去，地图块高亮显示的颜色
                  }
                }
                // itemStyle: {
                //   normal: {
                //     //          	color: '#ddd',
                //     borderColor: "rgba(147, 235, 248, 0)",
                //     borderWidth: 1,
                //     areaColor: {
                //       type: "radial",
                //       x: 0.5,
                //       y: 0.5,
                //       r: 0.8,
                //       colorStops: [
                //         {
                //           offset: 0,
                //           color: "rgba(175,238,238, 0)", // 0% 处的颜色
                //         },
                //         {
                //           offset: 1,
                //           color: "rgba(	47,79,79, .01)", // 100% 处的颜色
                //         },
                //       ],
                //       globalCoord: false, // 缺省为 false
                //     },
                //   },
                // },
                // itemStyle: {
                //   normal: {
                //     areaColor: "transparent",
                //     borderColor: "#3fdaff",
                //     borderWidth: 2,
                //     shadowColor: "rgba(63, 218, 255, 0.5)",
                //     shadowBlur: 30,
                //   },
                //   emphasis: {
                //     areaColor: "#2B91B7",
                //   },
                // },
              },
              series: series,
              // 初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果：
              animationDuration: 1000,
              animationEasing: "cubicOut",
              // 数据更新动画的时长。
              animationDurationUpdate: 1000
            };
            if (this.areaList.length != 34 && this.areaList.length != 0) {
              myChart.setOption(option);
            }
          });
        } else {
          if (provincesName == "320200") {
            // 经纬度
            var geoCoordMapcityArr = {
              "中国银行-陆行路支行": [119.827586, 31.346164],
              "中国银行-知行路支行": [120.383539, 31.594944],
              "中国银行-平行路路支行": [120.295576, 31.536363],
              窍楚: [120.276909, 31.913019] // 目标值
            };
            var datacity = [
              //航线条数
              [
                {
                  name: "中国银行-陆行路支行",
                  value: 0
                }
              ],
              [
                {
                  name: "中国银行-知行路支行",
                  value: 0
                }
              ],
              [
                {
                  name: "中国银行-平行路路支行",
                  value: 0
                }
              ]
              // [
              //   {
              //     name: "中国银行-过行路支行",
              //     value: 0
              //   }
              // ],
              // [
              //   {
              //     name: "中国银行-平行路支行",
              //     value: 0
              //   }
              // ],
              // [
              //   {
              //     name: "中国银行-和平路支行",
              //     value: 0
              //   }
              // ],
              // [
              //   {
              //     name: "中国银行-余平路支行",
              //     value: 0
              //   }
              // ]
            ];
            chinaGeoCoordMap = {};
            chinaDatas = [];
          } else {
            (geoCoordMapcityArr = {}), (datacity = []);
            chinaGeoCoordMap = {};
            chinaDatas = [];
          }

          var convertDatacity = function(data) {
            var res = [];
            var symbolImg =
              "image://" + require("@/assets/gongshangyinhang-.png");
            var symbolImg2 = "image://" + require("@/assets/logo.png"); // 中心点的图标
            symbolImg2;
            symbolImg;
            // var toCenterCoord=[]
            for (var i = 0; i < data.length; i++) {
              var dataItem2 = data[i];
              var geoCoord = geoCoordMapcityArr[dataItem2[0].name];
              var toCoord2 = [120.276909, 31.913019]; //目的地
              if (geoCoord && toCoord2) {
                res.push([
                  {
                    coord: geoCoord,
                    value: dataItem2[0].value
                  },
                  {
                    coord: toCoord2
                  }
                ]);
              }
            }
            return res;
          };
          $.getJSON(`/map/city/${provincesName}.json`, json => {

            console.log('dddddddddddddd', provincesName, json)
            var series = [];
            var symbolImg2 = "image://" + require("@/assets/logo.png");
            var symbolImg =
              "image://" + require("@/assets/gongshangyinhang-.png");
            var symbolImgPlane = "image://" + require("@/assets/wuliuche.png");
            echarts.registerMap(`${provincesName}`, json);
            [["窍楚", datacity]].forEach(function(item) {
              series.push(
                {
                  type: "lines",
                  zlevel: 2,
                  effect: {
                    show: true,
                    period: 5, //箭头指向速度，值越小速度越快
                    trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: symbolImgPlane, //箭头图标
                    symbolSize: _self.$fontSize.fontSize(0.2) //图标大小
                    // color: "blue", // 图标的颜色
                  },
                  lineStyle: {
                    normal: {
                      width: 1, //尾迹线条宽度
                      opacity: 1, //尾迹线条透明度
                      curveness: 0.3, //尾迹线条曲直度
                      color: "#f0814dea"
                    }
                  },
                  data: convertDatacity(item[1])
                },
                {
                  type: "scatter",
                  coordinateSystem: "geo",
                  zlevel: 2,
                  label: {
                    normal: {
                      show: true,
                      position: "right", //显示位置
                      offset: [5, 0], //偏移设置
                      formatter: function(params) {
                        //圆环显示文字
                        return params.data.name;
                      },
                      fontSize: _self.$fontSize.fontSize(0.13)
                    },
                    emphasis: {
                      show: true
                    }
                  },
                  symbol: symbolImg,
                  symbolSize: _self.$fontSize.fontSize(0.2),
                  itemStyle: {
                    normal: {
                      show: false,
                      color: "#ccc"
                    }
                  },
                  data: item[1].map(function(dataItem) {
                    return {
                      name: dataItem[0].name,
                      value: geoCoordMapcityArr[dataItem[0].name].concat([
                        dataItem[0].value
                      ])
                    };
                  })
                },
                //被攻击点
                {
                  type: "scatter",
                  coordinateSystem: "geo",
                  zlevel: 2,
                  rippleEffect: {
                    period: 4,
                    brushType: "stroke",
                    scale: 4
                  },
                  label: {
                    normal: {
                      show: true,
                      position: "right",
                      //offset:[5, 0],
                      color: "#f60",
                      formatter: "{b}",
                      textStyle: {
                        color: "#f60"
                      }
                    },
                    emphasis: {
                      show: true,
                      color: "#f60"
                    }
                  },
                  symbol: symbolImg2,
                  symbolSize: _self.$fontSize.fontSize(0.3),
                  data: [
                    {
                      name: item[0],
                      value: geoCoordMapcityArr[item[0]].concat([10])
                    }
                  ]
                }
              );
            });
            let option = {
              geo: {
                show: true,
                map: provincesName,
                label: {
                  normal: {
                    show: false,
                    textStyle: {
                      color: "#ddd"
                    }
                  },
                  emphasis: {
                    textStyle: {
                      color: "#000"
                    }
                  }
                },
                roam: false,
                itemStyle: {
                  normal: {
                    areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
                    borderColor: "#EBEBE4", //#EBEBE4灰色
                    borderWidth: 0.5
                  },
                  emphasis: {
                    areaColor: "rgba(43, 196, 243, 0.42)" //s鼠标放上去，地图块高亮显示的颜色
                  }
                }
                // itemStyle: {
                //   normal: {
                //     //          	color: '#ddd',
                //     borderColor: "rgba(147, 235, 248, 0)",
                //     borderWidth: 1,
                //     areaColor: {
                //       type: "radial",
                //       x: 0.5,
                //       y: 0.5,
                //       r: 0.8,
                //       colorStops: [
                //         {
                //           offset: 0,
                //           color: "rgba(175,238,238, 0)", // 0% 处的颜色
                //         },
                //         {
                //           offset: 1,
                //           color: "rgba(	47,79,79, .01)", // 100% 处的颜色
                //         },
                //       ],
                //       globalCoord: false, // 缺省为 false
                //     },
                //   },
                // },
                // itemStyle: {
                //   normal: {
                //     areaColor: "transparent",
                //     borderColor: "#3fdaff",
                //     borderWidth: 2,
                //     shadowColor: "rgba(63, 218, 255, 0.5)",
                //     shadowBlur: 30,
                //   },
                //   emphasis: {
                //     areaColor: "#2B91B7",
                //   },
                // },
              },
              series: series
            };
            myChart.setOption(option);
          });
        }
      }
    },
    creatWrap() {
      var zheDang = document.createElement("div");
      $(zheDang)
        .addClass("zhedang")
        .css({
          width: "100%",
          height: "100%",
          position: "absolute",
          top: 0,
          left: 0,
          backgroundColor: "rgba(0,0,0,.1)"
        })
        .appendTo(".wrap");
    },
    clearWrap(id) {
      $(id).click(function() {
        this.remove();
        $(".tongJiTu").remove();
        return false;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.flex {
  display: flex;
}

.opration {
  font-size: 0.3rem;
  text-align: center;
  height: 6%;
  width: 100%;
  display: table;
}
.map-wrap {
  width: 100%;
  /* height: calc(100% - 0.8rem); */
  height: 100%;
  background: url("../assets/image/mapBg.png") no-repeat top center;
  background-size: 98% 100%;
}
.mapCenter {
  position: relative;
  height: 100%;
}

.anniubtn {
  display: flex;
  height: 0.45rem;
  padding: 0.05rem 0 ;
  margin-top: 0.1rem;
  margin-left: 1%;
}
.refrashDate {
  display: table-cell;
  vertical-align: middle;
}
.refrashDate2 {
  color: #fff;
  width: 100%;
  text-align: center;
  cursor: pointer;
  font-size: 0.35rem;
  font-size: 14px;
}

.refrashDate a:hover {
  color: rgb(49, 153, 214);
}

#container {
  width: 100%;
  /* height: 6rem; */
  /* height: calc(94% - 1rem); */
  height: calc(88% - 0.55rem);
  margin: 0px auto 0;
  overflow: hidden;
}

.anniubtn button:nth-child(1) {
  margin-left: 0.185rem;
}

.anniubtn button {
  color: #c6cde9;
  background-color: rgba(172, 178, 238, 0.1);
  border-color: #2fdfffff;
}

.anniubtn button:hover {
  background-color: #014ea1ff;
  color: #fff;
}

.anniubtn button:focus {
  background-color: rgb(198, 205, 233);
  color: rgb(3, 12, 59);
}

.opration .anniubtn .el-date-picker {
  color: #c6cde9;
  background-color: rgba(172, 178, 238, 0.1);
  border-color: #46528c;
}

/* .opration .anniubtn .el-date-picker:hover {
  background-color: rgb(198, 205, 233);
  color: rgb(3, 12, 59);
} */
.select {
  /* margin-left: 0.185rem;
  margin-top: 0.185rem; */
  position: absolute;
  top: calc(10% + 0.5rem);
  left: 0.285rem;
  border-color: #2fdfffff;
}

.lunbo {
  width: 94%;
  margin: 0 auto;
  margin: 0 auto;
  /* height: 0.35rem; */
  height: 6%;
  font-size: 0.185rem;
  /* background: rgba(64, 224, 208, 0.363); */
  /* line-height: 0.25rem; */
  padding: 0 16px;
  position: relative;
}
.carous {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 0.4rem;
  line-height: 0.4rem;
  width: 100%;
}
.lunbo p {
  padding-left: 20px;
  font-size: 0.16rem !important;
}
.lunbo-tit {
  color: #fff;
  font-size: 0.16rem;
  z-index: 10;
}
.lunbo p span {
  font-size: 0.16rem;
}
</style>
<style>
.el-carousel__indicators--horizontal {
  display: none !important;
}
.el-carousel__arrow--left {
  left: 0 !important;
}
/* 下拉查询  */
.select-style {
  border-color: #2fdfffff !important;
  border: 1px solid;
  background: #051542ff !important;
  border-radius: 5px;
}
.select-style .el-input__inner {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border: 1px solid #a1a3ad;
  /* border-left-width: 0; */
  background-color: rgba(0, 0, 0, 0.8);
  font-family: PingFangSC-Regular;
  font-size: 0.16rem;
  color: rgba(255, 255, 255, 0.6);
}
.select-style .el-select-dropdown__item {
  font-size: 0.16rem;
}
.el-carousel__arrow .el-carousel__arrow--left {
  display: none;
}
.el-select__input {
}
.el-range-editor .el-range-input {
  color: #c6cde9 !important;
  background-color: rgba(172, 178, 238, 0.1) !important;
  border-color: #46528c !important;
}

.el-date-editor .el-range-separator {
  width: 10% !important;
  color: #c6cde9;
}

.el-select-dropdown__wrap {
  max-height: 1.5rem !important;
}

.el-select-dropdown__item.selected {
  color: #c6cde9;
  background-color: rgba(172, 178, 238, 0.1);
  border-color: #46528c;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: transparent;
  /* color: rgb(11, 39, 179); */
  color: #fff;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
  background-color: transparent;
  /* color: rgb(11, 39, 179); */
  color: #fff;
}

.el-scrollbar {
  overflow: hidden;
  position: relative;
  background: rgb(3, 12, 59);
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
  background-color: transparent;
  /* color: rgb(11, 39, 179); */
  color: #fff;
}

/* .el-input {
  width: 1.5rem;
  height: 0.12rem;
} */
.el-input--suffix .el-input__inner {
  background: rgb(3, 12, 59);
}

.el-select-dropdown {
  border: 1px solid rgb(3, 12, 59) !important;
}

.el-popper .popper__arrow {
  display: none;
}

.el-select-dropdown__item {
  height: 28px;
  line-height: 28px;
}

/* .el-popper[x-placement^="bottom"] {
  margin-top: 22px;
} */
/* .el-input--mini .el-input__icon {
  line-height: 0px;
  margin-top: 3px;
} */
.el-select-dropdown__list {
  display: flex;
}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
  position: absolute;
  right: 20px;
  font-family: element-icons;
  content: "\e6da";
  font-size: 12px;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  right: 0px;
}

.el-select-group__title:not(:first-of-type)::after {
  content: "";
  position: absolute;
  display: block;
  left: 77px;
  right: 0;
  bottom: 12px;
  height: 12px;
  background: #e4e7ed;
  width: 2px;
  top: 8px;
}

.el-input--suffix .el-input__inner {
  border-color: #38388a;
}

/* .el-select .el-input.is-focus .el-input__inner {
  border-color: #141458;
} */
.el-select-group__wrap:not(:last-of-type)::after {
  display: none;
}

.el-tag.el-tag--info {
  background-color: #141458;
  border-color: #3c3cc3;
  color: #909399;
}

.el-input--mini {
  font-size: 16px;
}

.text {
  color: #fff;
}

.textH {
  color: #fff;
  text-align: center;
  white-space: nowrap;
  padding-bottom: 0.185rem;
}

#zhuzhuang {
  background: rgb(178, 138, 8);
}

.divBox {
  display: flex;
}

.leftBox {
  width: 30%;
  position: relative;
}

.rightBox {
  flex: 1;
}

.icon,
.ptext {
  vertical-align: middle;
}

.iconBox {
  position: absolute;
  left: 0.185rem;
  top: 0.185rem;
  background-color: #fff;
  z-index: 99;
}

ul > li {
  list-style: none;
}

.lilist {
  cursor: pointer;
}

.lilist.notclick {
  cursor: not-allowed;
}

.el-select-dropdown
  .scroll-opacity.el-scrollbar
  .el-scrollbar__bar.is-vertical {
  opacity: 1;
}

.pdesc {
  color: #fff;
}

.pdesc > p {
  text-decoration: underline;
  font-size: 0.2rem;
  letter-spacing: 0.01rem;
  margin-bottom: 0.125rem;
  margin-left: 0.125rem;
}

.el-carousel__indicator--horizontal {
  display: none;
}
</style>
